<template>
  <view class="farm-container">
    <view class="nav-bar">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="page-title">我的小农场</text>
    </view>

    <!-- 状态栏 -->
    <view class="status-bar">
      <view class="status-row">
        <view class="status-item coins">
          <text class="icon">💰</text>
          <text class="value">{{ formatNumber(coins) }}</text>
          </view>
        <view class="status-item level">
          <text class="icon">⭐</text>
          <text class="value">等级 {{ level }}</text>
            </view>
        <view class="status-item weather">
          <text class="icon">{{ weatherIcon }}</text>
          <text class="value">{{ weatherTemp }}°C</text>
            </view>
          </view>
      <view class="progress-bar">
        <view class="progress" :style="{ width: xpProgress + '%' }"></view>
        </view>
      <text class="xp-text">{{ currentXp }}/{{ nextLevelXp }}</text>
    </view>
    
    <!-- 工具栏 -->
    <view class="tool-bar" 
      ref="toolBar"
      :style="toolbarStyle"
      @touchstart="handleToolbarStart"
      @touchmove="handleToolbarMove"
      @touchend="handleToolbarEnd"
    >
      <view class="tool-header">
        <view class="drag-handle">
          <view class="handle-line"></view>
          <view class="handle-line"></view>
        </view>
      </view>
      <view 
        class="tool-item"
        :class="{ active: currentTool === 'shovel' }"
        @tap="selectTool('shovel')"
      >
        <text class="tool-icon">🗡️</text>
        <text class="tool-name">铲除</text>
      </view>
      <view 
        class="tool-item"
        :class="{ active: currentTool === 'water' }"
        @tap="selectTool('water')"
      >
        <text class="tool-icon">💧</text>
        <text class="tool-name">浇水</text>
      </view>
    </view>

    <!-- 商店弹窗 -->
    <view v-if="showShop" class="shop-modal">
      <view class="shop-content">
        <view class="shop-header">
          <text class="shop-title">商店</text>
          <view class="close-btn" @tap="toggleShop">✕</view>
        </view>
        
        <view class="shop-search-bar">
          <view class="search-input">
            <text class="search-icon">🔍</text>
            <input 
              type="text" 
              v-model="searchQuery" 
              placeholder="搜索商品" 
              @input="filterItems"
            />
          </view>
          <view class="sort-button" @tap="toggleSortMenu">
            <text class="sort-icon">↕️</text>
            <text class="sort-text">{{ currentSort.text }}</text>
          </view>
        </view>
        
        <view class="shop-tabs">
          <view 
            v-for="tab in shopTabs" 
            :key="tab.id"
            class="shop-tab"
            :class="{ active: currentShopTab === tab.id }"
            @tap="switchTab(tab.id)"
          >
            <text class="tab-icon">{{ getTabIcon(tab.id) }}</text>
            <text class="tab-name">{{ tab.name }}</text>
          </view>
        </view>

        <scroll-view scroll-y class="shop-items">
          <!-- 种子商品 -->
          <template v-if="currentShopTab === 'seeds'">
            <view 
              v-for="seed in filteredSeeds"
              :key="seed.id"
              class="shop-item"
              :class="{ selected: selectedSeed && selectedSeed.id === seed.id }"
              @tap="selectSeed(seed)"
            >
              <view class="item-preview">
                <text class="item-icon">{{ getCropIcon(seed.id) }}</text>
              </view>
              <view class="item-info">
                <view class="item-name">
                  <text class="name-text">{{ seed.name }}</text>
                  <text class="level-tag">等级 {{ seed.level || 1 }}</text>
                </view>
                <text class="item-desc">{{ seed.description || '优质种子' }}</text>
                <view class="item-stats">
                  <view class="stat-item">
                    <text class="stat-icon">⏱️</text>
                    <text class="stat-value">{{ formatTime(seed.growthTime) }}</text>
                  </view>
                  <view class="stat-item">
                    <text class="stat-icon">💎</text>
                    <text class="stat-value">{{ seed.harvestValue }}</text>
                  </view>
                </view>
              </view>
              <view class="item-action">
                <view class="price">
                  <text class="price-icon">💰</text>
                  <text class="price-value">{{ seed.price }}</text>
                </view>
                <view class="buy-btn" :class="{ disabled: coins < seed.price }">
                  购买
                </view>
              </view>
            </view>
          </template>

          <!-- 装饰商品 -->
          <template v-if="currentShopTab === 'decorations'">
            <view 
              v-for="decoration in filteredDecorations"
              :key="decoration.id"
              class="shop-item"
              :class="{ selected: selectedDecoration && selectedDecoration.id === decoration.id }"
              @tap="selectDecoration(decoration)"
            >
              <view class="item-preview">
                <text class="item-icon">{{ getDecorationIcon(decoration.id) }}</text>
              </view>
              <view class="item-info">
                <view class="item-name">
                  <text class="name-text">{{ decoration.name }}</text>
                </view>
                <text class="item-desc">{{ decoration.description || '精美装饰' }}</text>
                <view class="item-stats">
                  <view class="stat-item">
                    <text class="stat-icon">⭐</text>
                    <text class="stat-value">{{ formatDecorationBonus(decoration) }}</text>
                  </view>
                </view>
              </view>
              <view class="item-action">
                <view class="price">
                  <text class="price-icon">💰</text>
                  <text class="price-value">{{ decoration.price }}</text>
                </view>
                <view class="buy-btn" :class="{ disabled: coins < decoration.price }">
                  购买
                </view>
              </view>
            </view>
          </template>

          <!-- 地块商品 -->
          <template v-if="currentShopTab === 'plots'">
            <view 
              v-for="(cost, index) in availablePlots"
              :key="index"
              class="shop-item"
            >
              <view class="item-preview">
                <text class="item-icon">🏡</text>
              </view>
              <view class="item-info">
                <view class="item-name">
                  <text class="name-text">新地块</text>
                  <text class="level-tag">{{ farmPlots.length + index + 1 }}号</text>
                </view>
                <text class="item-desc">解锁新的种植空间</text>
                <view class="item-stats">
                  <view class="stat-item">
                    <text class="stat-icon">📏</text>
                    <text class="stat-value">3x3格</text>
                  </view>
                </view>
              </view>
              <view class="item-action">
                <view class="price">
                  <text class="price-icon">💰</text>
                  <text class="price-value">{{ cost }}</text>
                </view>
                <view 
                  class="buy-btn" 
                  :class="{ disabled: coins < cost }"
                  @tap="purchasePlot(farmPlots.length + index)"
                >
                  解锁
                </view>
              </view>
            </view>
          </template>
        </scroll-view>
      </view>
    </view>

    <!-- 农田网格 -->
    <view class="farm-grid" :class="{ expanded: farmPlots.length > 9 }">
      <view 
        v-for="(plot, index) in farmPlots" 
        :key="index"
        class="farm-plot"
        :class="{ 
          'has-decoration': plot.decoration,
          'planting': plot.status === 'planting',
          'empty': !plot.crop,
          'growing': plot.status === 'growing',
          'ready': plot.status === 'ready',
          'needs-water': plot.needsWater,
          'isWatering': plot.isWatering,
          'isHarvesting': plot.isHarvesting
        }"
        @tap="handlePlotClick(index)"
      >
        <view class="plot-background" />
        
        <view class="plot-content">
          <text 
            v-if="plot.crop"
            class="crop-icon"
            :class="{
              growing: plot.status === 'growing',
              ready: plot.status === 'ready'
            }"
          >
            {{ getCropIcon(plot.crop.id) }}
          </text>
          
          <text 
            v-if="plot.status === 'growing'"
            class="growth-time"
            :class="{
              urgent: plot.remainingTime < 30,
              ready: plot.status === 'ready'
            }"
          >
            {{ formatTimeLeft(plot.remainingTime) }}
          </text>
        </view>
        
        <text 
          v-if="plot.decoration"
          class="plot-decoration"
        >
          {{ getDecorationIcon(plot.decoration.id) }}
        </text>
        
        <view v-if="plot.status === 'growing'" class="growth-progress">
          <view 
            class="progress-bar" 
            :style="{ width: plot.progress + '%' }"
          ></view>
        </view>
        
        <view v-if="plot.status === 'growing'" class="growth-sparkles">
          <span></span>
          <span></span>
          <span></span>
        </view>
        
        <!-- 成熟提示 -->
        <view v-if="plot.showMaturityHint" class="maturity-hint">
          <text>作物已成熟！</text>
        </view>

        <!-- 收获提示 -->
        <view class="harvest-hint" v-if="plot.status === 'ready'">
          <text>点击收获</text>
        </view>
        
        <view v-if="plot.needsWater" class="water-hint">
          <text class="water-icon">💧</text>
        </view>
        
        <view 
          class="weather-effect"
          :class="{ 
            'weather-rain': currentWeather.type === 'rain',
            'weather-sun': currentWeather.type === 'sunny',
            'weather-cloud': currentWeather.type === 'cloudy'
          }"
        >
          <template v-if="currentWeather.type === 'rain'">
            <view 
              v-for="n in 10" 
              :key="n" 
              class="rain-drop"
              :style="{
                left: Math.random() * 100 + '%',
                animationDelay: Math.random() + 's'
              }"
            ></view>
          </template>
          <view 
            v-else-if="currentWeather.type === 'sunny'" 
            class="sun-ray"
          ></view>
        </view>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <view 
        class="action-btn shop-btn"
        @tap="toggleShop"
        data-title="商店"
      >
        <text class="btn-icon">🏪</text>
      </view>
      <view 
        class="action-btn inventory-btn"
        @tap="toggleInventory"
        data-title="背包"
      >
        <text class="btn-icon">🎒</text>
        <text v-if="getTotalInventoryItems() > 0" class="btn-badge">
          {{ getTotalInventoryItems() }}
        </text>
      </view>
      <view 
        class="action-btn achievements-btn"
        @tap="toggleAchievements"
        data-title="成就"
      >
        <text class="btn-icon">🏆</text>
        <view v-if="hasNewAchievements" class="btn-badge new"></view>
    </view>
      <view 
        class="action-btn pet-btn"
        @tap="goToPetSystem"
        data-title="宠物"
      >
        <text class="btn-icon">🐾</text>
      </view>
        <view 
        class="action-btn log-btn"
        @tap="toggleLog"
        data-title="日志"
      >
        <text class="btn-icon">📋</text>
        <view v-if="hasNewLogs" class="btn-badge new"></view>
        </view>
      </view>

    <!-- 背包弹窗 -->
    <view v-if="showInventory" class="inventory-modal">
      <view class="inventory-content">
        <view class="inventory-header">
          <view class="inventory-title">
            <text class="title-icon">🎒</text>
            <text>我的背包</text>
          </view>
      <view class="inventory-stats">
        <view class="stat-item">
          <text class="stat-icon">📦</text>
          <text class="stat-value">{{ getTotalInventoryItems() }}/{{ maxInventorySize }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-icon">⭐</text>
          <text class="stat-value">{{ inventoryLevel }}</text>
            </view>
          </view>
          <view class="close-btn" @tap="toggleInventory">✕</view>
        </view>

        <view class="inventory-grid">
          <view 
            v-for="(item, index) in inventoryItems" 
            :key="index"
            class="inventory-slot"
            :class="{ empty: !item }"
            @tap="useInventoryItem(item)"
          >
            <template v-if="item">
              <text class="slot-icon">{{ getItemIcon(item) }}</text>
              <text class="slot-name">{{ item.name }}</text>
              <text class="slot-count" v-if="item.count > 1">x{{ item.count }}</text>
            </template>
          </view>
        </view>
      </view>
    </view>

    <!-- 成就弹窗 -->
    <view v-if="showAchievements" class="achievements-modal">
      <view class="achievements-content">
        <view class="achievements-header">
          <view class="achievements-title">
            <text class="title-icon">🏆</text>
            <text>成就</text>
          </view>
        <view class="close-btn" @tap="toggleAchievements">✕</view>
      </view>

      <scroll-view scroll-y class="achievements-list">
        <view 
          v-for="achievement in achievements" 
          :key="achievement.id"
          class="achievement-item"
          :class="{ completed: achievement.completed }"
        >
          <text class="achievement-icon">{{ achievement.icon }}</text>
          <view class="achievement-info">
            <text class="achievement-name">{{ achievement.name }}</text>
            <text class="achievement-desc">{{ achievement.description }}</text>
            <view class="achievement-progress">
              <view 
                class="progress-bar" 
                :style="{ width: getAchievementProgress(achievement) + '%' }"
              ></view>
              <text class="progress-text">
                {{ achievement.current }}/{{ achievement.target }}
              </text>
            </view>
          </view>
          <text v-if="achievement.completed" class="reward">
            +{{ achievement.reward }}💰
          </text>
        </view>
      </scroll-view>
    </view>
    </view>

    <!-- 日志面板 -->
    <view v-if="showLog" class="log-panel">
      <view class="log-header">
        <view class="log-title">
          <text class="title-icon">📋</text>
          <text>农场日志</text>
        </view>
        <view class="close-btn" @tap="toggleLog">✕</view>
      </view>
      
      <scroll-view scroll-y class="log-content">
        <view 
          v-for="(log, index) in gameLogs" 
          :key="index"
          class="log-item"
          :class="log.type"
        >
          <text class="log-time">{{ formatLogTime(log.time) }}</text>
          <view class="log-content">
            <text class="log-icon">{{ getLogIcon(log.type) }}</text>
          <text class="log-text">{{ log.message }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 公告提示 -->
    <view 
      v-if="showAnnouncement" 
      class="announcement"
      :class="{ 'announcement-enter': showAnnouncement }"
    >
      <text class="announcement-icon">{{ currentAnnouncement.icon }}</text>
      <text class="announcement-text">{{ currentAnnouncement.message }}</text>
    </view>
  </view>
</template>

<script>
import { CROPS, DECORATIONS, PLOT_UNLOCK_COSTS } from './config/gameConfig'
import { weatherSystem } from './services/weather'
import { levelSystem } from './services/level'
import { saveGameData, loadGameData } from './services/storage'
import { ACHIEVEMENTS } from './config/achievements'

export default {
  name: 'FarmPage',
  
  data() {
    return {
      coins: 1000,
      level: 1,
      currentXP: 0,
      selectedSeed: null,
      selectedDecoration: null,
      currentShopTab: 'seeds',
      shopTabs: [
        { id: 'seeds', name: '种子' },
        { id: 'decorations', name: '装饰' },
        { id: 'plots', name: '地块' }
      ],
      farmPlots: [],  // 将在 created 中初始化
      availableSeeds: [
        {
          id: 'carrot',
          name: '胡萝卜',
          price: 10,
          growthTime: 60,
          harvestValue: 20,
          icon: '🥕'
        },
        {
          id: 'tomato',
          name: '番茄',
          price: 20,
          growthTime: 120,
          harvestValue: 40,
          icon: '🍅'
        },
        {
          id: 'corn',
          name: '玉米',
          price: 30,
          growthTime: 180,
          harvestValue: 60,
          icon: '🌽'
        },
        {
          id: 'potato',
          name: '土豆',
          price: 15,
          growthTime: 90,
          harvestValue: 30,
          icon: '🥔'
        },
        {
          id: 'eggplant',
          name: '茄子',
          price: 25,
          growthTime: 150,
          harvestValue: 50,
          icon: '🍆'
        },
        {
          id: 'cucumber',
          name: '黄瓜',
          price: 18,
          growthTime: 100,
          harvestValue: 35,
          icon: '🥒'
        },
        {
          id: 'strawberry',
          name: '草莓',
          price: 35,
          growthTime: 200,
          harvestValue: 70,
          icon: '🍓'
        },
        {
          id: 'watermelon',
          name: '西瓜',
          price: 40,
          growthTime: 240,
          harvestValue: 80,
          icon: '🍉'
        },
        {
          id: 'pumpkin',
          name: '南瓜',
          price: 28,
          growthTime: 160,
          harvestValue: 55,
          icon: '🎃'
        }
      ],
      availableDecorations: [
        {
          id: 'scarecrow',
          name: '稻草人',
          price: 100,
          description: '保护作物免受虫害',
          bonus: { type: 'protection', value: 0.2 },
          icon: '🎎'
        },
        {
          id: 'wateringCan',
          name: '自动浇水器',
          price: 150,
          description: '自动浇水，提高生长速度',
          bonus: { type: 'growth', value: 0.3 },
          icon: '💧'
        },
        {
          id: 'fertilizer',
          name: '高级肥料',
          price: 200,
          description: '提高作物产量',
          bonus: { type: 'value', value: 0.4 },
          icon: '💊'
        },
        {
          id: 'windmill',
          name: '风车',
          price: 300,
          description: '改善农场环境，提高生长速度',
          bonus: { type: 'growth', value: 0.5 },
          icon: '🎡'
        },
        {
          id: 'fountain',
          name: '喷泉',
          price: 250,
          description: '净化空气，提高作物抗性',
          bonus: { type: 'protection', value: 0.4 },
          icon: '⛲'
        },
        {
          id: 'lantern',
          name: '灯笼',
          price: 180,
          description: '夜间照明，增加收益',
          bonus: { type: 'value', value: 0.3 },
          icon: '🏮'
        },
        {
          id: 'birdhouse',
          name: '鸟屋',
          price: 120,
          description: '吸引小鸟驱虫',
          bonus: { type: 'protection', value: 0.25 },
          icon: '🏠'
        },
        {
          id: 'flowerbed',
          name: '花坛',
          price: 160,
          description: '美化环境，促进生长',
          bonus: { type: 'growth', value: 0.35 },
          icon: '🌺'
        },
        {
          id: 'greenhouse',
          name: '温室',
          price: 500,
          description: '全天候保护作物生长',
          bonus: { type: 'growth', value: 0.6 },
          icon: '🏕️'
        },
        {
          id: 'pond',
          name: '小池塘',
          price: 400,
          description: '提供水源，增加产量',
          bonus: { type: 'value', value: 0.5 },
          icon: '🌊'
        }
      ],
      availablePlots: [500, 1000, 2000, 3000, 5000],
      currentTool: null,
      updateInterval: null,
      weatherUpdateInterval: null,
      showShop: false,
      showInventory: false,
      showAchievements: false,
      hasNewSeeds: false,
      hasNewAchievements: false,
      inventoryItems: [],
      maxInventorySize: 25,
      inventoryLevel: 1,
      achievements: ACHIEVEMENTS,
      waterEnergy: 100,
      maxWaterEnergy: 100,
      waterEnergyRecoveryRate: 1,
      lastWaterEnergyUpdate: Date.now(),
      shopStock: {},
      lastStockUpdate: Date.now(),
      stockRefreshInterval: 3600000,
      showLog: false,
      hasNewLogs: false,
      gameLogs: [],
      showAnnouncement: false,
      currentAnnouncement: null,
      randomEvents: [
        {
          id: 'goldRain',
          name: '金币雨',
          icon: '🌧️',
          message: '天降金币！获得随机金币奖励',
          probability: 0.1,
          effect(farm) {
            const coins = Math.floor(Math.random() * 100) + 50
            farm.coins += coins
            farm.addLog('event', `金币雨降临，获得${coins}金币！`)
          }
        },
        {
          id: 'fastGrowth',
          name: '光合作用增强',
          icon: '☀️',
          message: '阳光特别充足，作物生长加快',
          probability: 0.15,
          effect(farm) {
            farm.farmPlots.forEach(plot => {
              if (plot.crop && plot.status === 'growing') {
                plot.progress += 20
                if (plot.progress >= 100) {
                  plot.status = 'ready'
                }
              }
            })
            farm.addLog('event', '阳光特别充足，所有作物生长加快！')
          }
        },
        {
          id: 'pest',
          name: '虫害',
          icon: '🐛',
          message: '小心！虫害来袭',
          probability: 0.1,
          effect(farm) {
            farm.farmPlots.forEach(plot => {
              if (plot.crop && plot.status === 'growing' && Math.random() < 0.3) {
                plot.progress = Math.max(0, plot.progress - 10)
              }
            })
            farm.addLog('event', '发生虫害，部分作物生长受损！')
          }
        },
        {
          id: 'harvest',
          name: '丰收',
          icon: '🌟',
          message: '丰收季节到来啦！',
          probability: 0.1,
          effect(farm) {
            farm.harvestBonus = 2
            setTimeout(() => {
              farm.harvestBonus = 1
              farm.addLog('event', '丰收季节结束了')
            }, 60000) // 1分钟后结束
            farm.addLog('event', '丰收季节开始，收获作物可获得双倍收益！')
          }
        }
      ],
      harvestBonus: 1,
      eventCheckInterval: null,
      weatherTypes: [
        { type: 'sunny', temp: 25, description: '晴天' },
        { type: 'cloudy', temp: 22, description: '多云' },
        { type: 'rain', temp: 20, description: '下雨' }
      ],
      currentWeather: {
        type: 'sunny',
        temp: 25,
        description: '晴天'
      },
      weatherSystem: {
        calculateGrowthModifier(crop) {
          if (!crop) return 1.0;
          const weather = this.currentWeather;
          if (weather.type === 'sunny') return 1.2;
          if (weather.type === 'rain') return 1.1;
          return 1.0;
        }
      },
      searchQuery: '',
      showSortMenu: false,
      currentSort: { value: 'default', text: '默认排序' },
      sortOptions: [
        { value: 'default', text: '默认排序' },
        { value: 'priceAsc', text: '价格从低到高' },
        { value: 'priceDesc', text: '价格从高到低' },
        { value: 'nameAsc', text: '名称A-Z' },
        { value: 'nameDesc', text: '名称Z-A' }
      ],
      filteredSeeds: [],
      filteredDecorations: [],
      
      // 添加日志类型图标映射
      logIcons: {
        event: '🎯',
        harvest: '🌾',
        warning: '⚠️',
        achievement: '🏆',
        purchase: '🛍️',
        water: '💧',
        plant: '🌱',
        remove: '🗑️',
        level: '⭐',
        weather: '🌤️'
      },
      
      // 初始化日志数组
      gameLogs: [],
      showLog: false,
      hasNewLogs: false,
      
      // 最大日志数量
      maxLogCount: 100,
      toolbarPosition: {
        x: 20,
        y: 200
      },
      isDragging: false,
      startX: 0,
      startY: 0,
      nextLevelXp: 100, // 添加为数据属性
    }
  },

  computed: {
    levelProgress() {
      if (!levelSystem) return 0;
      return levelSystem.getLevelProgress() || 0;
    },
    
    weatherIcon() {
      const icons = {
        sunny: '☀️',
        cloudy: '☁️',
        rain: '🌧️',
        storm: '⛈️'
      }
      return icons[this.currentWeather?.type] || '☀️'
    },
    
    weatherText() {
      return this.currentWeather?.description || '晴天'
    },
    
    weatherTemp() {
      return this.currentWeather?.temp || 25
    },

    xpProgress() {
      if (!levelSystem?.nextLevelXp) return 0;
      return ((this.currentXP || 0) / levelSystem.nextLevelXp) * 100;
    },

    currentXp() {
      return (this.currentXP || 0).toFixed(0);
    },

    toolbarStyle() {
      return `transform: translate(${this.toolbarPosition.x}px, ${this.toolbarPosition.y}px)`
    }
  },

  created() {
    try {
      // 初始化等级系统
      if (typeof levelSystem === 'undefined') {
        this.initLevelSystem();
      }

      // 初始化农田地块
      this.farmPlots = Array(9).fill().map(() => this.getEmptyPlot());
      
      // 初始化天气
      this.initWeather();
      
      // 加载游戏数据
      const savedData = this.loadGameData();
      if (savedData) {
        this.loadGameState(savedData);
      }

      // 确保基本数据存在
      this.ensureBasicData();

      this.filteredSeeds = [...this.availableSeeds]
      this.filteredDecorations = [...this.availableDecorations]
      
      // 在组件创建时加载保存的日志
      if (savedData?.gameLogs) {
        this.gameLogs = savedData.gameLogs
      }
    } catch (error) {
      console.error('初始化失败:', error);
      // 确保至少有基本数据
      this.ensureBasicData();
    }
  },

  mounted() {
    try {
      // 启动实时更新
      this.startRealTimeUpdate();
      
      // 添加随机事件检查
      this.eventCheckInterval = setInterval(() => {
        this.checkRandomEvents();
      }, 30000);

      // 定期更新天气
      this.weatherUpdateInterval = setInterval(() => {
        this.updateRandomWeather();
      }, 300000);

      // 加载工具栏位置
      this.loadToolbarPosition();
    } catch (error) {
      console.error('启动定时器失败:', error);
    }
  },

  methods: {
    goBack() {
      uni.navigateBack()
    },

    startRealTimeUpdate() {
      if (this.updateInterval) {
        clearInterval(this.updateInterval);
      }

      this.updateInterval = setInterval(() => {
        const now = Date.now();
        
        // 更新浇水能量
        this.updateWaterEnergy();
        
        // 更新商店库存
        this.updateShopStock();
        
        // 更新作物生长
        this.farmPlots.forEach((plot, index) => {
          if (plot?.crop && plot.status === 'growing') {
            // 计算时间差（秒）
            const timeDiff = (now - plot.lastUpdate) / 1000;
            const growthModifier = this.calculateGrowthModifier(plot);
            
            // 计算新的剩余时间
            const newRemainingTime = Math.max(0, plot.remainingTime - timeDiff);
            
            // 计算进度
            const totalGrowthTime = plot.crop.growthTime;
            const progress = ((totalGrowthTime - newRemainingTime) / totalGrowthTime) * 100;
            
            // 创建更新后的地块数据
            const updatedPlot = {
              ...plot,
              remainingTime: newRemainingTime,
              progress: Math.min(100, progress),
              lastUpdate: now
            };

            // 检查是否成熟
            if (newRemainingTime <= 0 && plot.status !== 'ready') {
              updatedPlot.status = 'ready';
              updatedPlot.progress = 100;
              updatedPlot.remainingTime = 0;
              updatedPlot.showMaturityHint = true;
              
              // 3秒后隐藏成熟提示
              setTimeout(() => {
                if (this.farmPlots[index].status === 'ready') {
                  this.$set(this.farmPlots[index], 'showMaturityHint', false);
                }
              }, 3000);
            }

            // 更新地块数据
            this.$set(this.farmPlots, index, updatedPlot);
          }
        });
      }, 1000); // 每秒更新一次
    },

    handlePlotClick(index) {
      const plot = this.farmPlots[index]
      
      if (this.currentTool === 'shovel') {
        this.removeCrop(index)
      } else if (this.currentTool === 'water') {
        this.waterPlot(index)
      } else if (plot.status === 'ready') {
        this.harvestCrop(index)
      } else if (!plot.crop && this.selectedSeed) {
        this.plantSeed(index)
      } else if (!plot.decoration && this.selectedDecoration) {
        this.placeDecoration(index)
      }
    },

    plantSeed(index) {
      if (!this.selectedSeed || this.coins < this.selectedSeed.price) return;
      
      this.coins -= this.selectedSeed.price;
      
      const now = Date.now();
      const newPlot = {
        ...this.getEmptyPlot(),
        crop: { ...this.selectedSeed },
        status: 'growing',
        progress: 0,
        remainingTime: this.selectedSeed.growthTime || 60, // 确保有默认生长时间
        needsWater: false,
        lastUpdate: now,
        plantTime: now // 记录种植时间
      };

      this.$set(this.farmPlots, index, newPlot);
      
      // 添加种植日志
      this.addLog('plant', `种植了${this.selectedSeed.name}`)
      
      uni.showToast({
        title: '种植成功！',
        icon: 'success'
      });
      
      this.selectedSeed = null;
      this.saveGameState();
    },

    harvestCrop(index) {
      const plot = this.farmPlots[index]
      if (!plot.crop || plot.status !== 'ready') return
      
      const weatherBonus = this.calculateWeatherBonus(plot)
      const decorationBonus = this.calculateDecorationBonus(plot)
      
      // 计算收获价值（包含天气、装饰和丰收加成）
      const baseValue = plot.crop.harvestValue
      const finalValue = Math.floor(baseValue * (1 + weatherBonus + decorationBonus) * this.harvestBonus)
      
      this.coins += finalValue
      
      // 添加经验值
      const xpGain = Math.floor(finalValue * 0.5) // 每获得1金币获得0.5经验
      this.currentXP += xpGain
      
      // 检查是否升级
      if (this.currentXP >= this.nextLevelXp) {
        this.level++
        this.currentXP -= this.nextLevelXp
        this.nextLevelXp = Math.floor(this.nextLevelXp * 1.5) // 现在可以正常修改
        
        // 升级奖励
        const levelUpBonus = this.level * 100
        this.coins += levelUpBonus
        
        uni.showToast({
          title: `升级到${this.level}级！获得${levelUpBonus}金币奖励`,
          icon: 'success'
        })
      }
      
      // 添加收获日志
      this.addLog('harvest', `收获了${plot.crop.name}，获得${finalValue}金币和${xpGain}经验`)
      
      this.farmPlots[index] = this.getEmptyPlot()
      this.checkAchievements('harvest')
      
      uni.showToast({
        title: `收获成功！获得${finalValue}金币`,
        icon: 'success'
      })
      
      this.saveGameState()
    },

    placeDecoration(index) {
      const plot = this.farmPlots[index]
      
      if (plot.decoration) {
        uni.showToast({
          title: '该地块已有装饰物',
          icon: 'none'
        })
        return
      }
      
      if (this.coins >= this.selectedDecoration.price) {
        this.coins -= this.selectedDecoration.price
        this.farmPlots[index] = {
          ...plot,
          decoration: this.selectedDecoration
        }
        this.selectedDecoration = null
        this.saveGameState()
        
        uni.showToast({
          title: '装饰物放置成功',
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: '金币不足',
          icon: 'none'
        })
      }
    },

    selectSeed(seed) {
      if (this.coins < seed.price) {
        uni.showToast({
          title: '金币不足',
          icon: 'none'
        })
        return
      }
      this.selectedSeed = seed
      this.selectedDecoration = null
      this.toggleShop()
      uni.showToast({
        title: `已选择${seed.name}`,
        icon: 'none'
      })
    },

    selectDecoration(decoration) {
      this.selectedDecoration = decoration
      this.selectedSeed = null
      uni.showToast({
        title: `已选择${decoration.name}`,
        icon: 'none'
      })
    },

    purchasePlot(plotIndex) {
      const cost = PLOT_UNLOCK_COSTS[plotIndex - 9]
      
      if (this.coins >= cost) {
        this.coins -= cost
        this.farmPlots.push({
          crop: null,
          growthTime: 0,
          decoration: null,
          weatherEffect: null,
          isPlanting: false,
          lastUpdate: Date.now()
        })
        
        // 更新可用地块列表
        const nextPlotIndex = plotIndex + 1
        if (PLOT_UNLOCK_COSTS[nextPlotIndex - 9]) {
          this.availablePlots = PLOT_UNLOCK_COSTS.slice(
            nextPlotIndex - 9,
            nextPlotIndex - 6
          )
        } else {
          this.availablePlots = []
        }
        
        this.saveGameState()
        
        uni.showToast({
          title: '新地块购买成功',
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: '金币不足',
          icon: 'none'
        })
      }
    },

    handleWeatherChange(weather) {
      this.currentWeather = weather
      
      // 更新所有作物的天气效果
      this.farmPlots.forEach((plot, index) => {
        if (plot.crop) {
          const weatherModifier = weatherSystem.calculateGrowthModifier(plot.crop)
          this.farmPlots[index].weatherEffect = this.getWeatherEffect(weatherModifier)
        }
      })
    },

    handleLevelUp(newLevel, rewards) {
      this.level = newLevel
      
      if (rewards.coinBonus) {
        this.coins += rewards.coinBonus
        this.addLog('level', `升级到${newLevel}级！获得${rewards.coinBonus}金币奖励`)
      }
      
      uni.showToast({
        title: `升级到${newLevel}级！`,
        icon: 'success'
      })
      
      this.saveGameState()
    },

    calculateWeatherBonus(plot) {
      if (!plot || !plot.crop) return 0;
      try {
        const weatherModifier = this.weatherSystem.calculateGrowthModifier.call(this, plot.crop);
        return Math.max(0, weatherModifier - 1);
      } catch (error) {
        console.error('计算天气加成失败:', error);
        return 0;
      }
    },

    calculateDecorationBonus(plot) {
      if (!plot.decoration) return 0
      return plot.decoration.bonus.value
    },

    getWeatherEffect(modifier) {
      if (modifier <= 0.5) return 'weather-bad'
      if (modifier >= 1.5) return 'weather-good'
      return null
    },

    formatTime(seconds) {
      if (seconds < 60) {
        return `${Math.ceil(seconds)}秒`
      }
      const minutes = Math.floor(seconds / 60)
      const remainingSeconds = Math.ceil(seconds % 60)
      return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
    },

    formatNumber(num) {
      if (typeof num !== 'number') return '0';
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },

    getCropIcon(cropId) {
      const icons = {
        carrot: '🥕',
        tomato: '🍅',
        corn: '🌽'
      }
      return icons[cropId] || '🌱'
    },
    
    getDecorationIcon(decorationId) {
      const icons = {
        scarecrow: '🎎',
        wateringCan: '💧',
        fertilizer: '💊',
        windmill: '🎡',
        fountain: '⛲',
        lantern: '🏮',
        birdhouse: '🏠',
        flowerbed: '🌺',
        greenhouse: '🏕️',
        pond: '🌊'
      }
      return icons[decorationId] || '🛍️'  // 修改默认图标为购物袋
    },
    
    getWeatherIcon(weatherId) {
      const icons = {
        sun: '☀️',
        cloud: '☁️',
        rain: '🌧️',
        storm: '⛈️'
      }
      return icons[weatherId] || '🌤️'
    },
    
    getTabIcon(tabId) {
      const icons = {
        seeds: '🌱',
        decorations: '🎍',
        plots: '📦'
      }
      return icons[tabId] || '📋'
    },

    saveGameState() {
      const gameState = {
        coins: this.coins,
        level: this.level,
        currentXP: this.currentXP,
        nextLevelXp: this.nextLevelXp, // 添加保存
        farmPlots: this.farmPlots,
        availablePlots: this.availablePlots
      }
      this.saveGameData(gameState)
    },

    loadGameState(savedData) {
      this.coins = savedData.coins
      this.level = savedData.level || 1
      this.currentXP = savedData.currentXP || 0
      this.nextLevelXp = savedData.nextLevelXp || 100 // 添加加载
      this.farmPlots = savedData.farmPlots
      this.availablePlots = savedData.availablePlots
    },

    formatDecorationBonus(decoration) {
      const { type, value } = decoration.bonus
      switch (type) {
        case 'protection':
          return `抗性+${value * 100}%`
        case 'growth':
          return `生长+${value * 100}%`
        case 'value':
          return `收益+${value * 100}%`
        default:
          return ''
      }
    },

    initWeather() {
      try {
        // 初始化时随机一个天气
        this.updateRandomWeather();
      } catch (error) {
        console.error('初始化天气失败:', error);
        // 使用默认天气
        this.currentWeather = {
          type: 'sunny',
          temp: 25,
          description: '晴天'
        };
      }
    },

    updateRandomWeather() {
      try {
        const randomWeather = this.weatherTypes[Math.floor(Math.random() * this.weatherTypes.length)];
        if (randomWeather) {
          this.updateWeather(randomWeather);
        }
      } catch (error) {
        console.error('更新天气失败:', error);
      }
    },

    updateWeather(weather) {
      if (!weather) return;
      
      try {
        this.currentWeather = {
          type: weather.type || 'sunny',
          temp: (weather.temp + Math.floor(Math.random() * 5) - 2) || 25,
          description: weather.description || '晴天'
        };

        // 更新农作物生长状态
        this.updateCropGrowth();
      } catch (error) {
        console.error('设置天气失败:', error);
      }
    },

    selectTool(tool) {
      this.currentTool = this.currentTool === tool ? null : tool
      this.selectedSeed = null
      this.selectedDecoration = null
    },

    removeCrop(index) {
      const plot = this.farmPlots[index]
      if (!plot.crop) return
      
      // 返还部分成本
      const refundAmount = Math.floor(plot.crop.price * 0.5)
      this.coins += refundAmount
      
      // 添加铲除日志
      this.addLog('remove', `铲除了${plot.crop.name}，返还${refundAmount}金币`)
      
      this.$set(this.farmPlots, index, {
        ...this.getEmptyPlot(),
        lastUpdate: Date.now()
      })
      
      uni.showToast({
        title: `铲除成功，返还${refundAmount}金币`,
        icon: 'success'
      })
    },

    waterPlot(index) {
      const plot = this.farmPlots[index]
      if (!plot.crop || !plot.needsWater || this.waterEnergy < 10) {
        if (this.waterEnergy < 10) {
          uni.showToast({
            title: '体力不足',
            icon: 'none'
          })
        }
        return
      }
      
      this.waterEnergy -= 10
      this.$set(this.farmPlots[index], 'needsWater', false)
      // 加速生长
      const speedBonus = 1.5 // 提高浇水效果
      this.farmPlots[index].remainingTime *= (1 / speedBonus)
      
      // 添加浇水动画效果
      this.farmPlots[index].isWatering = true
      setTimeout(() => {
        this.farmPlots[index].isWatering = false
      }, 1000)
      
      // 添加浇水日志
      this.addLog('water', `给作物浇水，生长速度提升`)
      
      this.checkAchievements('water')
      
      uni.showToast({
        title: '浇水成功',
        icon: 'success'
      })
    },

    formatTimeLeft(seconds) {
      if (typeof seconds !== 'number' || seconds <= 0) return '';
      
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = Math.floor(seconds % 60);
      
      if (minutes > 0) {
        return `${minutes}分${remainingSeconds.toString().padStart(2, '0')}秒`;
      }
      return `${remainingSeconds}秒`;
    },

    getEmptyPlot() {
      return {
        crop: null,
        status: 'empty',
        progress: 0,
        remainingTime: 0,
        needsWater: false,
        lastUpdate: Date.now(),
        decoration: null,
        showMaturityHint: false
      };
    },

    updateCropGrowth() {
      const now = Date.now()
      this.farmPlots.forEach((plot, index) => {
        if (!plot.crop || plot.status === 'ready') return
        
        const elapsed = (now - plot.lastUpdate) / 1000
        let growthRate = 1
        
        // 天气影响
        if (this.currentWeather.type === 'rain') {
          growthRate *= 1.2
        } else if (this.currentWeather.type === 'sunny') {
          growthRate *= 1.1
        }
        
        // 缺水减速
        if (plot.needsWater) {
          growthRate *= 0.5
        }
        
        const timeReduction = elapsed * growthRate
        const newRemainingTime = Math.max(0, plot.remainingTime - timeReduction)
        
        // 更新状态
        this.$set(this.farmPlots, index, {
          ...plot,
          remainingTime: newRemainingTime,
          progress: ((plot.crop.growthTime - newRemainingTime) / plot.crop.growthTime) * 100,
          status: newRemainingTime <= 0 ? 'ready' : 'growing',
          lastUpdate: now,
          needsWater: Math.random() < 0.1 // 10%概率需要浇水
        })
      })
    },

    toggleShop() {
      this.showShop = !this.showShop
    },

    toggleInventory() {
      this.showInventory = !this.showInventory
    },

    toggleAchievements() {
      this.showAchievements = !this.showAchievements
      this.hasNewAchievements = false
    },

    updateShopStock() {
      const now = Date.now()
      if (now - this.lastStockUpdate >= this.stockRefreshInterval) {
        this.availableSeeds.forEach(seed => {
          this.shopStock[seed.id] = Math.floor(Math.random() * 10) + 5
        })
        this.lastStockUpdate = now
        this.hasNewSeeds = true
      }
    },

    purchaseItem(item) {
      if (this.coins >= item.price && this.shopStock[item.id] > 0) {
        this.coins -= item.price
        this.shopStock[item.id]--
        
        // 添加到背包
        const existingItem = this.inventoryItems.find(i => i.id === item.id)
        if (existingItem) {
          existingItem.count++
        } else {
          this.inventoryItems.push({
            id: item.id,
            type: item.type,
            count: 1
          })
        }
        
        this.checkAchievements('purchase')
        this.saveGameState()
        
        uni.showToast({
          title: '购买成功！',
          icon: 'success'
        })
      } else if (this.shopStock[item.id] <= 0) {
        uni.showToast({
          title: '库存不足',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '金币不足',
          icon: 'none'
        })
      }
    },

    useInventoryItem(item) {
      if (this.selectedSeed && item.type === 'seed') {
        // 使用种子
        this.selectedSeed = item
        item.count--
        if (item.count <= 0) {
          const index = this.inventoryItems.indexOf(item)
          this.inventoryItems.splice(index, 1)
        }
        this.toggleInventory()
      }
    },

    updateWaterEnergy() {
      const now = Date.now()
      const elapsed = (now - this.lastWaterEnergyUpdate) / 1000
      this.waterEnergy = Math.min(
        this.maxWaterEnergy,
        this.waterEnergy + elapsed * this.waterEnergyRecoveryRate
      )
      this.lastWaterEnergyUpdate = now
    },

    checkAchievements(type) {
      this.achievements.forEach(achievement => {
        if (achievement.completed) return
        
        switch (type) {
          case 'harvest':
            if (achievement.type === 'harvest') {
              achievement.current++
            }
            break
          case 'water':
            if (achievement.type === 'water') {
              achievement.current++
            }
            break
          case 'purchase':
            if (achievement.type === 'purchase') {
              achievement.current++
            }
            break
        }
        
        if (achievement.current >= achievement.target && !achievement.completed) {
          achievement.completed = true
          this.coins += achievement.reward
          this.hasNewAchievements = true
          uni.showToast({
            title: `完成成就：${achievement.name}`,
            icon: 'success'
          })
        }
      })
      
      this.saveGameState()
    },

    getAchievementProgress(achievement) {
      return Math.min(100, (achievement.current / achievement.target) * 100)
    },

    getTotalInventoryItems() {
      return this.inventoryItems.reduce((total, item) => total + item.count, 0)
    },

    getItemIcon(item) {
      if (item.type === 'seed') {
        return this.getCropIcon(item.id)
      }
      return this.getDecorationIcon(item.id)
    },

    // 切换商店标签
    switchTab(tabId) {
      this.currentShopTab = tabId
      this.selectedSeed = null
      this.selectedDecoration = null
    },

    // 添加日志方法
    addLog(type, message) {
      const log = {
        type,
        message,
        time: Date.now()
      }
      
      // 在开头添加新日志
      this.gameLogs.unshift(log)
      
      // 限制日志数量
      if (this.gameLogs.length > this.maxLogCount) {
        this.gameLogs = this.gameLogs.slice(0, this.maxLogCount)
      }
      
      // 如果日志面板没有打开，显示新日志提示
      if (!this.showLog) {
        this.hasNewLogs = true
      }
      
      // 保存日志到本地存储
      this.saveGameState()
    },

    // 格式化日志时间
    formatLogTime(timestamp) {
      const date = new Date(timestamp)
      return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
    },

    // 切换日志面板
    toggleLog() {
      this.showLog = !this.showLog
      if (this.showLog) {
        this.hasNewLogs = false
      }
    },

    // 显示公告
    showAnnouncementMessage(announcement) {
      this.currentAnnouncement = announcement
      this.showAnnouncement = true
      
      setTimeout(() => {
        this.showAnnouncement = false
      }, 3000)
    },

    // 检查随机事件
    checkRandomEvents() {
      this.randomEvents.forEach(event => {
        if (Math.random() < event.probability) {
          this.showAnnouncementMessage({
            icon: event.icon,
            message: event.message
          })
          event.effect(this)
        }
      })
    },

    // 修改 loadGameData 方法
    loadGameData() {
      try {
        const savedData = uni.getStorageSync('farmGameData')
        return savedData ? JSON.parse(savedData) : null
      } catch (e) {
        console.error('加载游戏数据失败:', e)
        return null
      }
    },

    // 修改 saveGameData 方法
    saveGameData(data) {
      try {
        uni.setStorageSync('farmGameData', JSON.stringify(data))
      } catch (e) {
        console.error('保存游戏数据失败:', e)
      }
    },

    beforeDestroy() {
      // 清理定时器
      if (this.updateInterval) {
        clearInterval(this.updateInterval);
      }
      if (this.weatherUpdateInterval) {
        clearInterval(this.weatherUpdateInterval);
      }
      if (this.eventCheckInterval) {
        clearInterval(this.eventCheckInterval);
      }
    },

    ensureBasicData() {
      // 确保基本数据存在，防止白屏
      if (!this.farmPlots || !this.farmPlots.length) {
        this.farmPlots = Array(9).fill().map(() => this.getEmptyPlot());
      }
      
      if (!this.currentWeather) {
        this.currentWeather = {
          type: 'sunny',
          temp: 25,
          description: '晴天'
        };
      }

      // 确保等级系统数据存在
      if (typeof this.currentXP === 'undefined') {
        this.currentXP = 0;
      }

      if (typeof this.level === 'undefined') {
        this.level = 1;
      }

      if (typeof this.nextLevelXp === 'undefined') {
        this.nextLevelXp = 100;
      }

      // 初始化其他必要数据
      if (!this.coins) {
        this.coins = 1000;
      }

      if (!this.weatherSystem) {
        this.weatherSystem = {
          calculateGrowthModifier: (crop) => {
            if (!crop) return 1.0;
            const weather = this.currentWeather;
            if (weather.type === 'sunny') return 1.2;
            if (weather.type === 'rain') return 1.1;
            return 1.0;
          }
        };
      }
    },

    initLevelSystem() {
      // 创建基本的等级系统
      window.levelSystem = {
        currentXP: 0,
        nextLevelXp: 100,
        getLevelProgress() {
          return 0;
        },
        initialize(level, xp, callback) {
          this.currentXP = xp;
          this.nextLevelXp = 100;
          this.levelUpCallback = callback;
        },
        addXP(amount) {
          this.currentXP += amount;
          if (this.currentXP >= this.nextLevelXp && this.levelUpCallback) {
            this.levelUpCallback(1, { coinBonus: 100 });
          }
        }
      };
    },

    calculateGrowthModifier(plot) {
      if (!plot?.crop) return 1.0;
      
      let modifier = 1.0;
      
      // 天气影响
      if (this.currentWeather?.type === 'sunny') modifier *= 1.2;
      if (this.currentWeather?.type === 'rain') modifier *= 1.1;
      
      // 装饰加成
      if (plot.decoration?.bonus) {
        const decorationBonus = this.calculateDecorationBonus(plot);
        modifier *= (1 + decorationBonus);
      }
      
      // 缺水减速
      if (plot.needsWater) modifier *= 0.5;
      
      return modifier;
    },

    filterItems() {
      const query = this.searchQuery.toLowerCase()
      
      // 过滤种子
      this.filteredSeeds = this.availableSeeds.filter(seed => 
        seed.name.toLowerCase().includes(query)
      )
      
      // 过滤装饰品
      this.filteredDecorations = this.availableDecorations.filter(decoration => 
        decoration.name.toLowerCase().includes(query)
      )
      
      // 应用排序
      this.applySorting()
    },
    
    toggleSortMenu() {
      this.showSortMenu = !this.showSortMenu
    },
    
    selectSort(sort) {
      this.currentSort = sort
      this.showSortMenu = false
      this.applySorting()
    },
    
    applySorting() {
      const sortFn = (a, b) => {
        switch (this.currentSort.value) {
          case 'priceAsc':
            return a.price - b.price
          case 'priceDesc':
            return b.price - a.price
          case 'nameAsc':
            return a.name.localeCompare(b.name)
          case 'nameDesc':
            return b.name.localeCompare(a.name)
          default:
            return 0
        }
      }
      
      this.filteredSeeds.sort(sortFn)
      this.filteredDecorations.sort(sortFn)
    },

    goToPetSystem() {
      uni.navigateTo({
        url: '/pages/pet/index'
      });
    },

    handleToolbarStart(e) {
      // 阻止事件冒泡和默认行为
      e.stopPropagation()
      e.preventDefault()
      
      const touch = e.touches[0]
      this.isDragging = true
      this.startX = touch.clientX - this.toolbarPosition.x
      this.startY = touch.clientY - this.toolbarPosition.y
    },

    handleToolbarMove(e) {
      if (!this.isDragging) return
      
      // 阻止事件冒泡和默认行为
      e.stopPropagation()
      e.preventDefault()
      
      const touch = e.touches[0]
      let x = touch.clientX - this.startX
      let y = touch.clientY - this.startY

      // 获取视口尺寸
      const systemInfo = uni.getSystemInfoSync()
      const viewportWidth = systemInfo.windowWidth
      const viewportHeight = systemInfo.windowHeight
      
      // 放宽限制，只要不完全超出视口即可
      x = Math.max(-40, Math.min(x, viewportWidth - 20))
      y = Math.max(0, Math.min(y, viewportHeight - 40))

      this.toolbarPosition = { x, y }
      
      try {
        uni.setStorageSync('toolbarPosition', JSON.stringify(this.toolbarPosition))
      } catch (e) {
        console.error('保存工具栏位置失败:', e)
      }
    },

    handleToolbarEnd(e) {
      // 阻止事件冒泡和默认行为
      e.stopPropagation()
      e.preventDefault()
      
      this.isDragging = false
    },

    // 在 mounted 中加载保存的位置
    loadToolbarPosition() {
      try {
        const savedPosition = uni.getStorageSync('toolbarPosition')
        if (savedPosition) {
          this.toolbarPosition = JSON.parse(savedPosition)
        }
      } catch (e) {
        console.error('加载工具栏位置失败:', e)
      }
    },

    getLogIcon(type) {
      const icons = {
        event: '🎯',
        harvest: '🌾',
        warning: '⚠️',
        achievement: '🏆',
        purchase: '🛍️',
        water: '💧',
        plant: '🌱',
        remove: '🗑️',
        level: '⭐',
        weather: '🌤️'
      }
      return icons[type] || '📝'
    },
  },
}
</script>

<style lang="scss">
.farm-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #e8f5e9, #c8e6c9);
  padding-top: 44px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: linear-gradient(135deg, #4CAF50, #43A047);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.status-bar {
  margin: 4px 8px 8px; // 减小顶部状态栏的边距
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  .status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .status-item {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      background: rgba(255,255,255,0.8);
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,0.1);
      
      .icon {
      font-size: 20px;
        margin-right: 8px;
      }
      
      .value {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }

      &.coins {
        background: #fff8e1;
        .icon { color: #ffd700; }
        .value { color: #f57f17; }
      }

      &.level {
        background: #e3f2fd;
        .icon { color: #2196f3; }
        .value { color: #1976d2; }
      }

      &.weather {
        background: #f3e5f5;
        .icon { color: #9c27b0; }
        .value { color: #7b1fa2; }
      }
    }
  }

  .progress-bar {
    margin-top: 12px;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;

    .progress {
      height: 100%;
      background: linear-gradient(90deg, #66bb6a, #43a047);
      transition: width 0.3s ease;
    }
  }
}

.farm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px; // 最小间距
  padding: 4px; // 最小内边距
  margin: 0 4px; // 最小外边距
  
  .farm-plot {
    aspect-ratio: 1;
    background: #a5d6a7;
    border: 1px dashed #81c784; // 更细的边框
    border-radius: 8px; // 更小的圆角
    position: relative;
    overflow: hidden;
    box-shadow: none; // 移除阴影
    transition: all 0.2s ease;

    &:active {
      transform: scale(0.98);
    }

    &.empty {
      background: rgba(165, 214, 167, 0.5);
      border: 1px dashed #81c784;

      &::after {
        content: '+';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px; // 更小的加号
        color: #4caf50;
        opacity: 0.4;
      }
    }

    &.growing {
      border: none;
      background: #a5d6a7;

      .crop-icon {
        animation: growing 2s ease-in-out infinite;
      }

      .growth-time {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(0,0,0,0.6);
        color: white;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        backdrop-filter: blur(4px);
      }
    }

    &.ready {
      border: 2px solid #4caf50;
      background: #c8e6c9;
      animation: pulse 2s infinite;

      .crop-icon {
        animation: bounce 1s infinite;
      }
    }

    .plot-content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .crop-icon {
        font-size: 40px;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
      }
    }

    .growth-bar {
    position: absolute;
    left: 0;
      right: 0;
      bottom: 0;
      height: 6px;
      background: rgba(0,0,0,0.1);

      .progress {
    height: 100%;
        background: #4caf50;
        transition: width 0.3s ease;
      }
    }
  }
}

.tool-bar {
  position: fixed;
  z-index: 99; // 提高层级
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.6);
  width: 60px;
  touch-action: none; // 防止触摸事件引起页面滚动
  user-select: none; // 防止文本选择
  
  .drag-handle {
    width: 32px;
    height: 12px;
    margin: 0 auto 8px;
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: 4px;
    touch-action: none; // 防止触摸事件引起页面滚动
    
    .handle-line {
    width: 100%;
      height: 2px;
      background: rgba(0,0,0,0.15);
      border-radius: 1px;
    }
  }
  
  &:active {
    .drag-handle {
      cursor: grabbing;
    }
  }

  .tool-item {
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;

    &:last-child {
      margin-bottom: 0;
    }

    &:active {
      transform: scale(0.95);
    }

    &.active {
      background: #4caf50;
      box-shadow: 0 2px 8px rgba(76,175,80,0.4);

      .tool-icon {
        color: white;
      }

      .tool-name {
        color: white;
        opacity: 1;
      }
    }

    .tool-icon {
      font-size: 24px;
      color: #2e7d32;
    }

    .tool-name {
    position: absolute;
      left: 50%;
      bottom: -20px;
      transform: translateX(-50%);
      font-size: 12px;
      color: #1b5e20;
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.2s;
      background: rgba(255,255,255,0.9);
      padding: 2px 6px;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    &:hover .tool-name {
      opacity: 1;
    }
  }
}

.shop-modal {
  position: fixed;
    left: 0;
    right: 0;
  top: 0;
    bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);

  .shop-content {
    width: 90%;
    max-height: 80vh;
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;

    .shop-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(0,0,0,0.1);

      .shop-title {
        font-size: 20px;
        font-weight: 600;
        color: #333;
      }

      .close-btn {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(0,0,0,0.05);
        color: #666;
        font-size: 16px;
        transition: all 0.2s ease;

        &:active {
          background: rgba(0,0,0,0.1);
        }
      }
    }

    .shop-search-bar {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;

      .search-input {
        flex: 1;
        height: 40px;
        background: #f5f5f5;
        border-radius: 20px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        border: 1px solid rgba(0,0,0,0.05);

        .search-icon {
          font-size: 20px;
          color: #666;
          margin-right: 8px;
        }

        input {
          flex: 1;
          height: 100%;
          border: none;
          background: none;
          font-size: 14px;
          color: #333;

          &::placeholder {
            color: #999;
          }
        }
      }

      .sort-button {
        height: 40px;
        padding: 0 16px;
        background: #f5f5f5;
        border-radius: 20px;
        display: flex;
        align-items: center;
        border: 1px solid rgba(0,0,0,0.05);

        .sort-icon {
          font-size: 20px;
          color: #666;
          margin-right: 8px;
        }

        .sort-text {
    font-size: 14px;
          color: #333;
        }
  }
}

.shop-tabs {
  display: flex;
      gap: 8px;
      margin-bottom: 16px;
      padding: 0 4px;
  
  .shop-tab {
        flex: 1;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        background: #f5f5f5;
        border: 1px solid rgba(0,0,0,0.05);
        transition: all 0.2s ease;

        .tab-icon {
          font-size: 20px;
          margin-right: 8px;
          color: #666;
        }

        .tab-name {
          font-size: 14px;
          color: #333;
        }
    
    &.active {
          background: #4caf50;
          border-color: #43a047;

          .tab-icon,
          .tab-name {
            color: white;
          }
        }
      }
    }

    .shop-items {
      flex: 1;
      overflow-y: auto;
      padding: 0 4px;

.shop-item {
        display: flex;
        align-items: center;
        padding: 12px;
        background: white;
        border-radius: 16px;
        margin-bottom: 12px;
        border: 1px solid rgba(0,0,0,0.05);
        transition: all 0.2s ease;

        &:active {
          transform: scale(0.98);
        }

  &.selected {
          background: #e8f5e9;
          border-color: #81c784;
        }

        .item-preview {
          width: 64px;
          height: 64px;
          border-radius: 16px;
          background: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          
          .item-icon {
            font-size: 36px;
          }
        }

        .item-info {
          flex: 1;
          
          .item-name {
            display: flex;
            align-items: center;
            gap: 8px;
            
            .name-text {
              font-size: 16px;
              font-weight: 600;
              color: #333;
            }
            
            .level-tag {
              padding: 2px 6px;
              border-radius: 8px;
              font-size: 12px;
              background: #e8f5e9;
              color: #2e7d32;
            }
          }
          
          .item-desc {
            font-size: 14px;
            color: #666;
            margin: 4px 0;
          }
          
          .item-stats {
  display: flex;
            gap: 16px;
            
            .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
              
              .stat-icon {
                font-size: 16px;
                color: #666;
              }
              
              .stat-value {
                font-size: 14px;
                color: #333;
                font-weight: 500;
              }
            }
          }
        }

        .item-action {
          margin-left: auto;
          padding-left: 16px;
          
          .price {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 8px;
            
            .price-icon {
              font-size: 20px;
              color: #ffd700;
            }
            
            .price-value {
              font-size: 16px;
              font-weight: 600;
              color: #f57f17;
            }
          }
          
          .buy-btn {
            padding: 6px 16px;
            border-radius: 12px;
            background: #4caf50;
            color: white;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
            
            &:active {
              transform: scale(0.95);
            }
            
            &.disabled {
              background: #e0e0e0;
              color: #999;
            }
          }
        }
      }
    }
  }
}

.sort-menu {
  position: absolute;
  right: 16px;
  top: 120px;
  background: white;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.1);
  z-index: 101;

  .sort-item {
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;

    text {
      font-size: 14px;
      color: #333;
    }

    &:active {
      background: rgba(0,0,0,0.05);
    }

    &.active {
      background: #e8f5e9;

      text {
        color: #2e7d32;
        font-weight: 500;
      }
    }
  }
}

.bottom-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 12px;
  z-index: 90;

  .action-btn {
    flex: 1;
    height: 56px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.6);
    transition: all 0.2s ease;

    &:active {
      transform: translateY(2px);
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .btn-icon {
      font-size: 28px;
      margin-right: 8px;
    }

    .btn-text {
    font-size: 16px;
      font-weight: 600;
    }

    &.shop-btn {
      background: #fff8e1;
      border-color: #ffd54f;

      .btn-icon {
        color: #ffa000;
      }

      .btn-text {
        color: #f57f17;
      }
    }

    &.pet-btn {
      background: #e8f5e9;
      border-color: #81c784;

      .btn-icon {
        color: #2e7d32;
      }

      .btn-text {
        color: #1b5e20;
      }
    }

    &.log-btn {
      background: #f3e5f5;
      border-color: #ce93d8;

      .btn-icon {
        color: #7b1fa2;
      }

      .btn-text {
        color: #4a148c;
      }
    }
  }
}

@keyframes growing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(76,175,80,0.4); }
  70% { box-shadow: 0 0 0 10px rgba(76,175,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); }
}

.log-panel {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 80px;
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  max-height: 300px;
  z-index: 89;

  .log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.1);

    .log-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      color: #333;

      .title-icon {
        font-size: 20px;
      }
    }
  }

  .log-content {
    height: calc(100% - 40px);
    overflow-y: auto;

    .log-item {
      display: flex;
      align-items: flex-start;
      padding: 8px;
      border-radius: 8px;
      margin-bottom: 8px;
      background: rgba(255,255,255,0.6);
      border: 1px solid rgba(0,0,0,0.05);

      .log-time {
        font-size: 12px;
        color: #666;
        margin-right: 8px;
        white-space: nowrap;
      }

      .log-content {
        flex: 1;
  display: flex;
  align-items: center;
        gap: 8px;

        .log-icon {
          font-size: 16px;
        }

        .log-text {
          font-size: 14px;
          color: #333;
          flex: 1;
        }
      }

      &.event {
        background: #e8f5e9;
        border-color: #a5d6a7;
      }

      &.harvest {
        background: #fff8e1;
        border-color: #ffe082;
      }

      &.warning {
        background: #ffebee;
        border-color: #ef9a9a;
      }
    }
  }
}

.action-buttons {
  position: fixed;
  right: 16px;
  bottom: 88px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 90;

  .action-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
      align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.6);
    transition: all 0.2s ease;
    position: relative;

    &:active {
      transform: scale(0.92);
    }

    .btn-icon {
      font-size: 22px;
    }

    .btn-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      border-radius: 8px;
      background: #f44336;
      color: white;
      font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      border: 1.5px solid white;
    }

    &.shop-btn {
      background: linear-gradient(135deg, #fff8e1, #ffecb3);
      .btn-icon { color: #ffa000; }
    }

    &.inventory-btn {
      background: linear-gradient(135deg, #e3f2fd, #bbdefb);
      .btn-icon { color: #1976d2; }
    }

    &.pet-btn {
      background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
      .btn-icon { color: #2e7d32; }
    }

    &.log-btn {
      background: linear-gradient(135deg, #f3e5f5, #e1bee7);
      .btn-icon { color: #7b1fa2; }
    }

    &::after {
      content: attr(data-title);
      position: absolute;
      right: 52px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.8);
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s;
    }

    &:hover::after {
      opacity: 1;
      visibility: visible;
    }
  }
}

.shop-modal {
  .shop-content {
    .shop-categories {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 16px;
      
      .category-item {
        aspect-ratio: 1;
        background: #f5f5f5;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid rgba(0,0,0,0.05);
        transition: all 0.2s ease;

        &:active {
          transform: scale(0.98);
        }

        &.active {
          background: #e8f5e9;
          border-color: #81c784;

          .category-icon {
            color: #2e7d32;
          }

          .category-name {
            color: #1b5e20;
          }
        }

        .category-icon {
          font-size: 32px;
          color: #666;
        }

        .category-name {
            font-size: 14px;
          color: #333;
            font-weight: 500;
        }
      }
    }

    .shop-items {
      .shop-item {
        position: relative;
        overflow: hidden;

        .item-tag {
          position: absolute;
          top: 8px;
          right: 8px;
          padding: 4px 8px;
          border-radius: 12px;
            font-size: 12px;
          font-weight: 500;

          &.new {
            background: #e3f2fd;
            color: #1976d2;
          }

          &.hot {
            background: #fff3e0;
            color: #e65100;
          }

          &.sale {
            background: #fce4ec;
            color: #c2185b;
          }
        }

        .item-preview {
          width: 64px;
          height: 64px;
          border-radius: 16px;
          background: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;

          .item-icon {
            font-size: 36px;
          }
        }

        .item-info {
          .item-name {
  display: flex;
  align-items: center;
            gap: 8px;

            .name-text {
              font-size: 16px;
              font-weight: 600;
              color: #333;
            }

            .level-tag {
              padding: 2px 6px;
              border-radius: 8px;
            font-size: 12px;
              background: #e8f5e9;
              color: #2e7d32;
            }
          }

          .item-desc {
            font-size: 14px;
            color: #666;
            margin: 4px 0;
          }

          .item-stats {
    display: flex;
            gap: 16px;

            .stat-item {
              display: flex;
    align-items: center;
              gap: 4px;
    
              .stat-icon {
      font-size: 16px;
                color: #666;
              }

              .stat-value {
                font-size: 14px;
                color: #333;
      font-weight: 500;
              }
            }
          }
        }

        .item-action {
          margin-left: auto;
          padding-left: 16px;

          .price {
  display: flex;
  align-items: center;
            gap: 4px;
            margin-bottom: 8px;

            .price-icon {
              font-size: 20px;
              color: #ffd700;
            }

            .price-value {
              font-size: 16px;
              font-weight: 600;
              color: #f57f17;
            }

            .original-price {
              font-size: 14px;
              color: #999;
              text-decoration: line-through;
              margin-left: 4px;
            }
          }

          .buy-btn {
            padding: 6px 16px;
  border-radius: 12px;
            background: #4caf50;
            color: white;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;

            &:active {
              transform: scale(0.95);
            }

            &.disabled {
              background: #e0e0e0;
              color: #999;
            }
          }
        }
      }
    }
  }
}

.inventory-modal,
.achievements-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);

  .inventory-content,
  .achievements-content {
    width: 90%;
    max-height: 80vh;
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);

    .inventory-header,
    .achievements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(0,0,0,0.1);

      .inventory-title,
      .achievements-title {
  display: flex;
  align-items: center;
  gap: 8px;
        font-size: 20px;
        font-weight: 600;
        color: #333;

        .title-icon {
          font-size: 24px;
        }
      }

      .inventory-stats {
        display: flex;
        gap: 16px;

        .stat-item {
      display: flex;
          align-items: center;
          gap: 4px;
          padding: 4px 12px;
          background: #f5f5f5;
          border-radius: 12px;

          .stat-icon {
            font-size: 16px;
        color: #666;
          }

          .stat-value {
    font-size: 14px;
            color: #333;
            font-weight: 500;
          }
        }
      }
    }
  }
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 4px;

  .inventory-slot {
    aspect-ratio: 1;
    background: #f5f5f5;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.2s ease;

    &:active {
      transform: scale(0.98);
    }

    &.empty {
      background: rgba(0,0,0,0.05);
      border-style: dashed;
    }

    .slot-icon {
      font-size: 32px;
      margin-bottom: 4px;
    }

    .slot-name {
      font-size: 12px;
      color: #333;
      text-align: center;
      line-height: 1.2;
    }

    .slot-count {
      position: absolute;
      bottom: 8px;
      right: 8px;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 10px;
      background: #1976d2;
  color: white;
      font-size: 12px;
      font-weight: 500;
  display: flex;
  align-items: center;
      justify-content: center;
    }
  }
}

.action-buttons {
  .action-btn {
    &.achievements-btn {
      background: linear-gradient(135deg, #fff3e0, #ffe0b2);
      .btn-icon { color: #e65100; }
    }
  }
}

.action-buttons {
  // ... existing code ...

  .log-btn {
    position: relative;
    
    .red-dot {
      position: absolute;
      top: -2px;
      right: -2px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ff4d4f;
      box-shadow: 0 0 4px rgba(255, 77, 79, 0.5);
      animation: pulse 1.5s infinite;
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(255, 77, 79, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
  }
}

.weather-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.weather-rain .rain-drop {
  position: absolute;
  width: 2px;
  height: 10px;
  background: rgba(255,255,255,0.6);
  animation: rain-fall 1s linear infinite;
  border-radius: 1px;
  box-shadow: 0 0 2px rgba(255,255,255,0.3);
}

@keyframes rain-fall {
  0% {
    transform: translateY(-10px) rotate(15deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%) rotate(15deg);
    opacity: 0;
  }
}

.weather-sun .sun-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: rgba(255,255,0,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: sun-shine 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255,255,0,0.3);
}

@keyframes sun-shine {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.4;
  }
}

.weather-cloud {
  background: rgba(200,200,200,0.1);
}
</style> 